<template>
  <h3>Todolist</h3>
  <input type="text" v-model="textValue" />
  <button @click="add">添加</button>

  <ul>
    <li v-for="item in list" :key="item.id">
      <span>{{ item.name }}</span>
      <button @click="remove(item.id)">del</button>
    </li>
  </ul>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    const [list, remove] = delModule();
    const [textValue, add] = addModule(list);
    return {
      textValue,
      add,
      list,
      remove,
    };
  },
};

const addModule = (list) => {
  // 添加功能
  const textValue = ref("");
  // 添加功能
  const add = () => {
    list.value.push({
      name: textValue.value,
      id: new Date().getTime(),
    });
    textValue.value = "";
  };

  return [textValue, add];
};

const delModule = () => {
  // 删除功能
  const list = ref([
    {
      name: "张三",
      id: 1,
    },
    {
      name: "李四",
      id: 2,
    },
  ]);
  // 删除功能
  const remove = (id) => {
    list.value = list.value.filter((item) => item.id !== id);
  };

  return [list, remove];
};
</script>
